<%@page import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <style>
        input{
            height: 20px;
        }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function  creatXMLHttpRequest() {
            var XMLHttp
            if(window.XMLHttpRequest){
                XMLHttp = new XMLHttpRequest();
            }
            else{
                XMLHttp = new ActiveXObject("Microsoft.XMLHttp")
            }
            return XMLHttp;
        }

    </script>
</head>
<body>
<div id="m-Cart02">
    <div id="common-header">
        <div class="clearfix" id="headerTop">
            <div id="left">
                <select>
                    <option>USA</option>
                    <option>UK</option>
                    <option>CN</option>
                </select>
                <span><a href="#">DAILDY DEALS</a></span>
                <span><a href="#">DAILDY DEALS</a></span>
                <span><a href="#">DAILDY DEALS</a></span>
                <span><a href="#">DAILDY DEALS</a></span>
            </div>
            <div id="right">
                <c:choose>
                    <c:when test="${empty sessionScope.user}">
                        <span id="user"><a href="<c:url value="/jsps/user/login.jsp" />"><i class="fa fa-user"></i>登录</a></span>
                        <span id="shopcar"><a href="<c:url value='/regesit.jsp'/>"><i class="fa fa-shopping-cart"></i>注册</a></span>
                    </c:when>
                    <c:otherwise>
                        <span id="user"><i class="fa fa-user"></i>${user.getUsername()}</span>
                        <span id="shopcar"><a href="<c:url value='/UserServlet?method=quit'/>"><i class="fa fa-shopping-cart"></i>退出</a></span>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        <div id="headerMain" class="clearfix">
            <img src="http://ozz8m4qhr.bkt.clouddn.com/loge.png" width="59" height="24" id="loge">
            <ul id="nav" class="clearfix">
                <li class="navLi">
                    <div class="navDiv">
                        <a href="<c:url value='/ProductServlet?method=findByCid&cid=1' />">
                            WOMEN<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
                <li class="navLi">
                    <div class="navDiv">
                        <a href="<c:url value='/ProductServlet?method=findByCid&cid=2'/>">
                            MAN<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
                <li class="navLi">
                    <div class="navDiv">
                        <a  href="<c:url value='/ProductServlet?method=findByCid&cid=3'/>">
                            KIDS<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
                <li class="navLi">
                    <div class="navDiv">
                        <a href="<c:url value="/cart.jsp"/>">
                            我的购物车<i class="fa fa-angle-down"></i>
                        </a>
                    </div>
                </li>
            </ul>
            <div id="search">
                <span id="searchSpan1">LIVE FILLING-ROOM</span>
                <span id="searchSpan2"><span>ECO</span>FRIENDLY</span>
                <i class="fa fa-search"></i>
            </div>
        </div>
    </div>
    <header>
        <ul class="head_nav clearfix">
            <li><a href="#">100% STUDENTDISCOUNT ></a></li>
            <li><a href="#">$9.95 - UNLIMITEDNEXT_DAY DELIVERY FORIYR ></a></li>
            <li><a href="#">FREE DELIVERY WORLDWIDE ></a></li>
        </ul>
    </header>
    <div class="section clearfix">
        <div class="sec_left">
            <div class="sec_left_1">
                <ul class="sec_nav1 clearfix">
                    <li><a href="#">HOMEPAGE</a> /</li>
                    <li><a href="#">BASKET</a> /</li>
                    <li><a href="#">SHIPPING & DELIVERY</a></li>
                </ul>
                <div class="sec_left_word1 clearfix">
                    <p>SHIPPING & DELIVERY</p>
                    <div class="sort"><a href="#">CONTINUE SHOPPING</a></div>
                </div>
            </div>
            <div class="sec_left_2" >
                <p>CONTACT DETAILS</p>
                <!--注册表单提交-->
                <form id="form">
                    <input hidden="hidden" value="regesit" name="method">
                    <ul class="sec_left_input" style="display: inline-block">
                        <li>用户名
                            <span> * </span>
                            <input type="text"  id="username" onfocus="on()" onblur="checkUserName()" />
                            <span id="checkuser" ></span>
                        </li>
                        <li>密 码：
                            <span> * </span>
                            <input type="password"  id="password" onfocus="on1()"   onblur="checkPassword()" placeholder="6到16数字、字母、下划线"/>
                            <span id="checkpassword"></span>
                        </li>
                        <li>确认密码：
                            <span> * </span>
                            <input type="password"  style="width: 326px;height: 39px;" id="secondpassword" onfocus="on2()"   onblur="checksecondepassword()"/>
                            <span id="checksecondpassword"></span>
                        </li>
                        <li>电子邮箱：
                            <span> * </span>
                            <input type="email"  id="email" style="width: 326px;height: 39px;" onfocus="on3()"   onblur="checkemail()"/>
                            <span id="checkemail"></span>
                        </li>
                        <li><span class="errors">${errors}</span></li>
                    </ul>

                    <div class="sort" style="margin-top: 40px;margin-left: 100px;background: blue">
                       <input value="提交" type="button" onclick="check()">
                    </div>
                </form>
            </div>

            <script>
                //ajax将数据发送到服务器
                function check() {
                    var xhr =creatXMLHttpRequest();
                    if($("#checkpassword").text()!="√" && $("#checkuser").text()!="√"&& $("#checksecondpassword").text()!="√"&&$("#checkemail").text()!="√"){
                           $(".errors").text("请认证填写表单");
                           return;
                    }
                    $.ajax({
                        type:'post',
                        data:{"username":$("#username").val(),"password":$("#password").val(),"email":$("#email").val()},
                        url:"/fashion/UserServlet?method=regesit",
                        success:function (data) {
                            alert(data)
                        },
                        error:function () {
                            alert(data)
                        }
                    });
                }
                function clearError() {
                    $(".errors").text("");
                }
                function checkUserName(){
                    //用户名校验，6到16个字符（字母和数字）
                    var str=document.getElementById("username").value;
                    if(str==""){
                        document.getElementById("checkuser").style.color="red";
                        document.getElementById("checkuser").innerHTML="登录名不能为空";
                        return;
                    }else{
                        document.getElementById("checkuser").style.color="green";
                        document.getElementById("checkuser").innerHTML="√";
                    }
                }
                function checkPassword(){
                    //6到16数字、字母、下划线组成，首字母为字母
                    var regu="^[0-9a-zA-Z_]{5,15}$";
                    var re=new RegExp(regu);
                    var str=document.getElementById("password").value;
                    var checkpassword=document.getElementById("checkpassword");
                    if(str==""){
                        checkpassword.style.color="red";
                        checkpassword.innerHTML="密码不能为空";
                        return ;
                    }
                    if(!re.test(str)){
                        checkpassword.style.color="red";
                        checkpassword.innerHTML="请输入6到16数字、字母、下划线";
                    }else{
                        checkpassword.style.color="green";
                        checkpassword.innerHTML="√";
                    }

                }
                function checksecondepassword(){
                    var password=document.getElementById("password").value;
                    var secondpassword=document.getElementById("secondpassword").value;
                    var checkpassword=document.getElementById("checksecondpassword");
                    if(secondpassword==""){
                        checkpassword.style.color="red";
                        checkpassword.innerHTML="密码不能为空";
                        return;
                    }
                    if(password!=secondpassword){
                        checkpassword.style.color="red";
                        checkpassword.innerHTML="前后密码输入不正确！";

                    }else{
                        checkpassword.style.color="green";
                        checkpassword.innerHTML="√";
                    }

                }
                function checkemail(){

                    var regu="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$";
                    var re=new RegExp(regu);
                    var str=document.getElementById("email").value;
                    var checkemail=document.getElementById("checkemail");

                    if(str==""){
                        checkemail.style.color="red";
                        checkemail.innerHTML="邮箱不能为空！";
                        return;
                    }
                    if(!re.test(str)){
                        checkemail.style.color="red";
                        checkemail.innerHTML="请输入正确的邮箱格式！";

                    }else{
                        checkemail.style.color="green";
                        checkemail.innerHTML="√";
                    }
                }
                function on(){
                    document.getElementById("checkuser").innerHTML="";
                    clearError();
                }
                function on1(){
                    document.getElementById("checkpassword").innerHTML="";
                    clearError();
                }
                function on2(){
                    document.getElementById("checksecondpassword").innerHTML="";
                    clearError();
                }
                function on3(){
                    document.getElementById("checkemail").innerHTML="";
                    clearError();
                }

            </script>
            <!--运送方式可以在购买填写用户地址时的环节使用-->
            <div class="sec_left_3" style="border: 1px solid red">
                <div class="p">运送方式</div>
                <div class="lable">
                        <!--可以使用复选框-->
                    <lable>
                        <input type="radio">
                        <span>韵达飞机专派</span>
                        <span>派送 in 4-6 working days</span>
                    </lable>
                </div>
                <div class="lable">
                    <lable>
                        <input type="radio">
                        <span>京东无人机速派</span>
                        <span>Delivery in 1-3 working days</span>
                    </lable>
                </div>
                </select>
                <div class="link"><a href="#">VIEW SHIPPING DETAILS</a></div>
            </div>
            <div class="sec_left_4">
                <div class="sort"><a href="#">BACK TO BASKET</a></div>
                <div class="sort"><a href="#">NEXT STEP</a></div>
                <div class="sec_left_word">For information on Returns visit the <a href="#">Customer Care</a> area.Delivery Info.Working days are from Monday to Friday,not including holidays<br/>remember that the courier does not deliver on National Holidays.
                </div>
            </div>
        </div>

    </div>
    <div id="common-footer">
        <div id="footerTop">
            <ul id="list" class="clearfix">
                <li>
                    <p>QUESTIONS?</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>WHAT'S IN STORE</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>MORE ABOUT</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>QUESTIONS?</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
                <li>
                    <p>MORE ABOUT</p>
                    <p>Help</p>
                    <p>Track Order</p>
                    <p>Returns</p>
                </li>
            </ul>

            <p id="check">SHOPPING TO
                <select>
                    <option>USA</option>
                </select>
            </p>
            <img src="img/Catalog02/footer.jpg" width="388" height="22">
        </div>
        <div id="footerBottom">
        <span id="span1">
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
        </span><br>
            <span id="span2">this namsssw sswxzsja sjjcvud  skkvis</span><br>
            <span>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-google"></i>
            <i class="fa fa-linkedin"></i>
        </span>
        </div>
    </div>
</div>
<script src="js/lib/template-web.js"></script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/module/Cart02.js"></script>
<script src="js/lib/velocity.min.js"></script>
</body>
</html>